<template>
  <div class="wrap">
    <div class="bannerWrap">
      <img
        v-if="!resInforData.userBannerImg"
        src="@/assets/dele/shopBg.png"
        alt=""
        class="banner"
      />
      <img v-else :src="$imgUrl + resInforData.userBannerImg" alt="" class="banner" />
      <img src="@/assets/point.png" alt="" class="point" @click="show = true" />
    </div>
    <div class="mainWrap">
      <div class="topInfoWrap" @click="jumpPersonalData">
        <div class="headInfoWrap">
          <img :src="$imgUrl + resInforData.headImage" alt="" class="headImg" />
        </div>
        <div class="nameLeft">
          <div class="name">
            <em class="nameText">{{ resInforData.nickName }}</em>
            <img src="@/assets/sex.png" alt="" class="sex" v-if="resInforData.sex == 0" />
            <img
              src="@/assets/sex2.png"
              alt=""
              class="sex"
              v-if="resInforData.sex == 1"
            />
            <em class="ID">ID:{{ resInforData.id }}</em>
          </div>
          <div class="school">{{ resInforData.schoolName }}</div>
        </div>
      </div>
      <div class="menuWrap menuWrap2">
        <div class="menuItem menuItem2" @click="jumpMyWallet">
          <img src="@/assets/personOption8.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">我的钱包</div>
        </div> 
        <div class="menuItem menuItem2" @click="jumpStockRecord">
          <img src="@/assets/personOption9.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">进货记录</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpMyPromotion">
          <img src="@/assets/personOption10.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">我的推广</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpMyRentMoney">
          <img src="@/assets/personOption11.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">我的租金</div>
        </div>

        <div class="menuItem menuItem2">
          <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg2NzUzNjA4NQ==&scene=124#wechat_redirect">
          <img src="@/assets/personOption6.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">在线客服</div>
          </a>
        </div>
         
        <div class="menuItem menuItem2" @click="jumpAboutUs">
          <img src="@/assets/personOption2.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">关于我们</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpPrivacyPolicy">
          <img src="@/assets/personOption3.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">隐私政策</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpServiceAggrement">
          <img src="@/assets/personOption4.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">服务协议</div>
        </div>
        <div class="menuItem menuItem2" @click="jumpSystemMassge">
          <img src="@/assets/personOption12.png" alt="" class="menuItemImg2" />
          <div class="menuItemText">系统消息</div>
        </div>
      </div>
    </div>
    <!-- 遮罩层-退出登录 -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = false"></div>
      <div class="chooseNumWrap">
        <div class="optionsItem" @click="loginOut">退出登录</div>
        <div class="optionsItem dele" @click="show = false">取消</div>
      </div>
    </div>
    <!-- <tabbar></tabbar> -->
    <div style="height: 100px" v-if="!show"></div>
    <div class="tabbarWrap" v-if="!show">
      <router-link :to="{ name: 'bIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar1.1.png" alt="" class="tabbarImg" />
          <p class="tabbarText">商城</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bShopIndex' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar4.2.png" alt="" class="tabbarImg" />
          <p class="tabbarText">店铺</p>
        </div>
      </router-link>
      <router-link :to="{ name: 'bPersonalCenter' }">
        <div class="tabbarItem">
          <img src="@/assets/tabbar3.2.png" alt="" class="tabbarImg" />
          <p class="tabbarText">我的</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Switch } from "vant";
import tabbar from "../components/tabbarB";
import { apiGetAppUserInfo } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      show: false,
      resInforData: "", //个人信息
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    this.getAppUserInfo();
  },
  methods: {
    //获取个人数据：
    getAppUserInfo() {
      apiGetAppUserInfo({}).then((res) => {
        this.resInforData = res.data;
        console.log("个人信息", this.resInforData);
      });
    },
    jumpPersonalData() {
      this.$router.push({
        path: "/pages/personalData",
        query: {
          //传递参数
        },
      });
    },
    //关于我们：
    jumpAboutUs() {
      this.$router.push({
        path: "/pages/aboutUs",
        query: {
          //传递参数
        },
      });
    },
    //隐私服务：
    jumpPrivacyPolicy() {
      this.$router.push({
        path: "/pages/privacyPolicy",
        query: {
          //传递参数
        },
      });
    },

    //服务协议：
    jumpServiceAggrement() {
      this.$router.push({
        path: "/pages/serviceAggrement",
        query: {
          //传递参数
        },
      });
    },
    //系统消息：
    jumpSystemMassge() {
      this.$router.push({
        path: "/pages/systemMsgList",
        query: {
          //传递参数
        },
      });
    },
    //我的租金：
    jumpMyRentMoney() {
      this.$router.push({
        path: "/pages/myRentMoney",
        query: {
          //传递参数
        },
      });
    },
    //进货记录：
    jumpStockRecord() {
      this.$router.push({
        path: "/pages/bStockRecord",
        query: {
          //传递参数
        },
      });
    },
    
    //我的钱包：
    jumpMyWallet() {
      this.$router.push({
        path: "/pages/bMyWallet",
        query: {
          //传递参数
        },
      });
    },
    //我的推广：
    jumpMyPromotion() {
      this.$router.push({
        path: "/pages/bMyPromotion",
        query: {
          //传递参数
        },
      });
    },

    //退出登录
    loginOut() {
      // sessionStorage.removeItem("loginInfo")
      this.$router.replace({
        path: "/",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    tabbar,
    [Switch.name]: Switch,
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: #000;
}
.bannerWrap {
  position: relative;
}
.point {
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-top: 5px;
  position: absolute;
  right: 20px;
  top: 15px;
}
.banner {
  width: 100%;
  height: 220px;
  position: absolute;
}
.mainWrap {
  position: absolute;
  top: 206px;
  background: #fafbfc;
  border-radius: 20px 20px 0px 0px;
  width: 100vw;
}
.topInfoWrap {
  overflow: hidden;
  width: 95%;
  margin: 18px auto;
}
.headInfoWrap {
  width: 70px;
  height: 70px;
  border: 2px solid #f48f5b;
  border-radius: 70px;
  float: left;
}
.headImg {
  width: 100%;
  height: 100%;
  border-radius: 70px;
}
.nameLeft {
  float: left;
  margin-left: 15px;
}
.name {
  font-size: 15px;
  font-weight: 600;
  color: #181818;
  margin-top: 13px;
}
.nameText {
}
.sex {
  width: 12px;
  height: 12px;
  margin: 0px 5px;
}
.ID {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.school {
  height: 20px;
  line-height: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-align: center;
  margin-top: 10px;
}
/* .attention {
  float: right;
  width: 80px;
  height: 33px;
  line-height: 33px;
  background: #181818;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 500;
  color: #181818;
  text-align: center;
  margin-top: 25px;
} */
.countStatics {
  width: 95%;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: #181818;
  height: 35px;
}
.item {
  float: left;
  margin-right: 21px;
}
.bigFont {
  font-size: 15px;
}
.menuContainer {
  width: calc(95% - 40px);
  padding: 16px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
}
.titleWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.leftItem {
  font-size: 12px;
  font-weight: 500;
  color: #333333;
}
.rightItem {
  font-size: 12px;
  font-weight: 300;
  color: #666666;
}
.rightGreyArrow {
  width: 5px;
  height: 9px;
}
.menuWrap {
  overflow: hidden;
}
.menuItem {
  font-size: 11px;
  font-weight: 300;
  color: #333333;
  text-align: center;
  width: 20%;
  margin-top: 20px;
  float: left;
}
.menuItem2 {
  width: 25%;
}
.menuItemImg {
  width: 22px;
  height: 22px;
}
.menuItemImg2 {
  width: 24px;
  height: 22px;
}
.menuItemText {
  text-align: center;
  padding-top: 13px;
}
.menuWrap2 {
  width: 90%;
  margin: 0 auto;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
</style>
